MacOS Safari Guide
LSE MY472: Data for Data Scientists
The following provides some useful information for using the macOS Safari web browser. It is not comprehensive, but focused on key aspects of Safari that might be useful for this course. You can consult the full guide to Safari here: https://support.apple.com/en-gb/guide/safari/welcome/mac.
Keep in mind that Safari is a standard web browser and even though there are superficial design differences with other browsers, it works the same way that other browsers do.
Opening Safari
Any file, folder or application on macOS can be found in the Finder app:
You can navigate to a folder with all the apps on the computer by clicking “Applications” on the left menu:
Here, you can see both Positron and Safari. You can also see Terminal if you scroll down a little more.
To open Safari, simply double click on the icon.
Downloads
When you download a file in Safari, it will appear in your Downloads folder. Launch the Finder app and navigate to the Downloads folder by clicking “Downloads” on the left menu:
Developer tools
Safari has developer tools, just like Chrome and Firefox. However, you may have to enable the developer tools first.
Enabling developer tools
In some cases, you will not see a “Develop” menu when you open Safari:
If that is the case, then you need to open the Safari Settings, which can be found in the “Safari” menu:
Once the Settings pane opens, navigate to “Advanced” on the right and check the box for “Show features for web developers”:
Close the Settings pane, and you will now see a “Develop” menu:
Viewing source
To view the page source, you select the “Show Page Source” option in the “Develop” menu
Inspecting elements
To inspect elements on the page, you select the “Show Web Inspector” option in the “Develop” menu
After you select this, the web inspection panel will appear, for example:
Copying CSS Selectors or XPath
If you would like to select a specific object on the page and copy the CSS Selector or XPath, first select “Start element selection” by clicking the bullseye icon:
Then, just like in Chrome or Firefox:
- Click the element on the page you want to inspect.
- The corresponding source code will be highlighted in the inspection panel.
- Right click on the highlighted source code to copy the CSS selector or XPath.